<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div class="list-box">
    <div class="nav">
        <ul>
            <li>产品管理</li>
            <li>/</li>
            <li>产品列表</li>
        </ul>
    </div>
    <div class="search">
        <form action="" method="">
            <input type="hidden" id="currPage" />
            产品标题 : <input id="title" type="text">
            <input type="button" class="btn" id="searchBtn" value="搜索">
        </form>
    </div>
    <div class="toolbar">
        <input type="button" class="btn" value="新增产品" onclick="jumpAdd()">
        <input type="button" class="btn" value="删除产品" onclick="doDeletes()">
    </div>
    <div>
        <table id="tt"></table>
    </div>
    <div class="page">
        <ul id="page-bar"></ul>
    </div>
</div>
<script type="text/javascript">
    function loadList(page){
        page = page==undefined?1:page;
        // 加载初始数据
        $.get("/web/product",{op:"query",page:page,title:$("#title").val()},function(data){
            // 记录当前页码
            $("#currPage").val(data.page);
            // 给table中加数据
            var table = $("#tt");
            table.empty();
            table.append(`<tr>
                <th><input id="checkAll" onclick="checkAll()" type="checkbox"></th>
                <th>编号</th>
                <th>标题</th>
                <th>类别描述</th>
                <th>创建时间</th>
                <th>最后修改时间</th>
                <th>操作</th>
            </tr>`);
            // 添加其他行
            for(var x = 0; x < data.rows.length;x ++){
                var p = data.rows[x];
                table.append(`<tr ${x%2!=0?'class="odd"':''}>
                <td><input ckproductid="${p.productId}" type="checkbox"></td>
                <td>${p.productId}</td>
                <td>${p.productTitle}</td>
                <td>${p.typeDesc}</td>
                <td>${p.createTime}</td>
                <td>${p.modifyTime}</td>
                <td>
                    <input type="button" class="btn" onclick="jumpUpdate(${p.productId})" value="编辑">
                    <input type="button" class="btn" onclick="doDelete(${p.productId})" value="删除">
                </td>
            </tr>`);
            }
            // 处理分页栏
            var pageBar = $("#page-bar");
            pageBar.empty();
            pageBar.append("<li onclick='loadList("+((page-1)<1?1:(page-1))+")'>&lt;&lt;</li>");
            // 计算要显示的最大的页码
            var start = 1;
            var end = 1;
            if(data.maxPage <= 10){
                end = data.maxPage;
            }else if(data.maxPage > 10){
                start = (data.page - 4) > 0?(data.page-4):1;
                end = (start + 9) > data.maxPage? data.maxPage : (start + 9);
            }
            
            // 显示其它页
            for(var x = start;x <= end;x ++){
                if(x == data.page){
                    pageBar.append("<li class='page-active' >"+x+"</li>");
                }else{
                    pageBar.append("<li onclick='loadList("+x+")'>"+x+"</li>");
                }
            }
            pageBar.append("<li onclick='loadList("+((page+1)>data.maxPage?data.maxPage:(page+1))+")'>&gt;&gt;</li>");
        });
    }
    function searchBntClick(){
        loadList(1);
    }
    $(function(){
        // 页面一加载就加载默认数据
        loadList(1);
        // 给搜索按钮绑定事件  (里面的事件，只要写名字即可，不要写())
        $("#searchBtn").click(searchBntClick);
        
        // 给批量删除的按钮绑定事件
        $("#deletsBtn").click(function(){
            var cks = $("[ckproductid]:checked");
            if(cks==undefined || cks.length == 0){
                return;
            }
            // 拼接参数
            var param = "op=deletes";
            for(var x = 0;x < cks.length;x ++){
                param += "&productId="+$(cks[x]).attr("ckproductid")
            }
            if(confirm("您确定要删除选中的数据吗？")){
                $.post("/web/product",param,function(data){
                    if(data>'0'){
                        loadList($("#currPage").val());
                        $("#content").load("product/product-list.html");
                        alert("删除成功");
                    }else{
                        $("#content").load("product/product-list.html");
                        alert("删除成功");
                    }
                });
            }
            
        });
    })
    
    
    function doDelete(productId){
        if(confirm("您确定要删除选中的数据吗？")){
            $.post("/web/product",{op:"delete",productId:productId},function(data){
                if(data==1){
                    alert("删除成功");
                    loadList($("#currPage").val());
                }else{
                    alert("删除失败");
                }
            });
        }
    }
    
    function doDeletes(){
    	var cks = $("[ckproductid]:checked");
    	if(cks==undefined || cks.length == 0){
    		return;
    	}
    	var param = "op=deletes";
    	for(var x = 0;x < cks.length;x ++){
    		param += "&productId="+$(cks[x]).attr("ckproductid");
    	}
    	if(confirm("您确定要删除选中的数据吗？")){
    		$.post("/web/product",param,function(data){
				if(data>'0'){
					alert("删除成功");
					loadList($("#currPage").val());
				}else{
					alert("删除失败");
				}
			});
    	}
    }
    
    function jumpAdd(){
        $("#content").load("product/product-add.html");
    }
    function jumpUpdate(id){
    	updateId = id;
    	$("#content").load("product/product-update.html");
    }
    function checkAll(){
    	ck = $("#checkAll");
    	cks = $("[ckproductId]");
    	for(var i = 0;i < cks.length;i ++){
    		$(cks[i]).prop("checked",ck.prop("checked"))
    	}
    }
    </script>
</body>
</html>
